'use strict'
import React, {
    Component
} from 'react'
import {
    Link
} from 'react-router'

import Header from './Common/Header'
import LoadingBox from './Common/LoadingBox'
import {
    HttpService,
    getLocalTime,
    Tips,
    localData
} from '../Tools'

export default class Task extends Component {
    constructor(props) {
        super(props);
        this.page = 1;
        this.pagesize = 10;
        this.toBottom = 100;
        this.state = {
            taskList: [],
            subjectList: [],
            dataLoad: 1,
            dataEnd: 0,
            dataNull: 0
        }
    }
    componentWillMount() {
        if (!localData.task) {
            localData.task = {
                method: sessionStorage.userrole == '家长' ?
                    'm104LoadHomeworkByStudentByPhone' : 'm103LoadHomeworkByTeacherByPhone',
                courseName: ''
            }
        }
        this.getTask();
    }

    componentDidMount() {
        if (localData.task.courseName != '') {
            setTimeout(() => {
                document.querySelector('.sltbox').value = localData.task.courseName
            }, 400)
        }
        window.onscroll = () => {
            const {
                dataLoad,
                dataEnd,
                dataNull
            } = this.state;
            if (dataLoad == 1 || dataEnd == 1 || dataNull == 1)
                return;
            var scrollTop = 0;
            if (document.documentElement && document.documentElement.scrollTop) {
                scrollTop = document.documentElement.scrollTop;
            } else if (document.body) {
                scrollTop = document.body.scrollTop;
            }
            if (document.body.clientHeight - window.innerHeight - scrollTop <= this.toBottom) {
                this.page++;
                this.getTask();
            }
        }
        //加载科目
        HttpService.query({
            url: '/jxt-commonbackground/ajaxHomework.do',
            data: {
                jybTicket: sessionStorage.ticket,
                method: sessionStorage.userrole == '家长' ?
                    'm102LoadCourseNameByStudent' : 'm101LoadCourseNameByTeacher'
            },
            success: (res => {
                if (res.code == 0) {
                    this.setState({
                        subjectList: res.rs
                    });
                    return;
                }
                Tips(res.msg);
            })
        })
    }
    //获取作业列表
    getTask() {
        this.setState({
            dataLoad: 1,
            dataEnd: 0,
            dataNull: 0
        });
        HttpService.query({
            url: '/jxt-commonbackground/ajaxHomework.do',
            data: {
                page: this.page,
                pagesize: 10,
                jybTicket: sessionStorage.ticket,
                method: localData.task.method,
                courseName: localData.task.courseName
            },
            success: (res => {
                this.setState({
                    dataLoad: 0
                });
                if (res.code == 0) {
                    //获取数据成功
                    let newData = this.state.taskList.concat(res.r.homeworks);
                    this.setState({
                        taskList: newData
                    });
                    if (res.r.totalRecordCount == this.pagesize) {
                        this.setState({
                            dataEnd: 1
                        });
                    } else if (res.r.homeworks.length < this.pagesize) {
                        this.setState({
                            dataEnd: 1
                        });
                        if (newData.length == 0) {
                            this.setState({
                                dataEnd: 0,
                                dataNull: 1
                            });
                        }
                    }
                    return;
                }
                if (localData.task.courseName == '')
                    res.msg = '当前帐号非任课教师<br/>该功能无法使用'
                Tips(res.msg);
            })
        })
    }

    //选择科目
    sltCourse(e) {
        this.page = 0;
        localData.task.courseName = e.currentTarget.value;
        let obj = e.currentTarget
        document.querySelector('.h_title span').innerHTML = obj.options[obj.selectedIndex].text
        this.setState({
            dataLoad: 1,
            dataEnd: 0,
            dataNull: 0,
            taskList: []
        })
        this.getTask();
    }
    render() {
        const {
            dataLoad,
            dataEnd,
            dataNull,
            taskList,
            subjectList
        } = this.state
        const taskTagList = taskList.map((item, index) => {
            const timeStr = getLocalTime(item.createTime)
            const newIdea = sessionStorage.userrole == '家长' && (item.read == 0 || (item.requireSign == 1 && item.sign == 0))
            return (
                <Link className="pnt_item" to={'/TaskDetail/' + item.id}>
                    <span className="type_task"></span>
                    <h5><span>{item.courseName + '作业'}</span>{newIdea
                            ? <i>new</i>
                            : ''}</h5>
                    <div className="intro">{item.remark}</div>
                    <div className="time">
                        {timeStr}
                    </div>
                    {/*<span className='ready'>{item.readedStudentCount}人已读</span>*/}
                </Link>
            )
        })
        const subjectTagList = subjectList.map((item, index) => {
            return (
                <option value={item.courseName} >{item.courseName}</option>
            )
        })
        let publishLink = null;
        if (sessionStorage.userrole != '家长')
            publishLink = <Link className='h_link add_blue' to={sessionStorage.app
                ? '/taskPublish/true'
                : '/taskPublish'}/>
        return (
            <div>
                <Header link={publishLink} title={subjectList.length==0?'所有科目':null} appLink='1'>
                    <span>{localData.task.courseName?localData.task.courseName:'所有科目'}</span><br/>
                    <select dir="rtl" className="sltbox" onChange={this.sltCourse.bind(this)}>
                        <option value=''>所有科目</option>
                        {subjectTagList}
                    </select>
                </Header>
                <div className="pjb_noticelist">
                    {taskTagList}
                </div>
                <LoadingBox dataLoad={dataLoad} dataNull={dataNull} dataEnd={dataEnd}/>
            </div>
        )
    }
}
